<template>
  <div class="home-wrap">
    <div class="home-list-info">

    </div>
  </div>
  <div class="policy-center-list-li">
    <img src="../assets/bg.jpg" >
    <div class="text-box">
      <div class="policy-list-desc">
        长三角双创示范基地联盟签订双创券通用通兑合作协议
      </div>
      <div class="policy-list-tag">
        <span class="policy-date">2020年04月03日 17:14:56</span>
        <span>新闻资讯</span>
      </div>
      <div class="policy-detail-summary">
        11月15日，长三角双创示范基地联盟单位（上海市杨浦区、江苏省常州市武进区、浙江省嘉兴市南湖…
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "Animate"
}
</script>

<style lang="less" scoped>

.list-mask{
  position: absolute;
  bottom: -200px;
  height: 200px;
  width: 230px;
  right: -14px;
  z-index: 10;
  backdrop-filter: blur(15px);
  box-shadow: 0 -10px 10px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  transition: bottom 0.5s;
  transition-delay: 0.8s;
}
.list-mask .mask-cont{
  //transform: translateY(-20px);
  transition-delay: 0.6s;
}
.list-mask .mask-cont{
  font-size: 14px;
  line-height: 22px;
  text-indent: 30px;
  letter-spacing: 1px;
  padding: 14px 16px;
}
.list-mask .mask-cont:hover{
  transform: translateY(-40px);

}
/**
    鼠标移入hover动画效果
 */
.policy-center-list-li:hover img{
  transform: scale(1.3);
  transition: all 0.4s ease 0s;
  -webkit-transform: scale(1.3);
}
.policy-center-list-li:hover .text-box{
  transform:translateY(-60px);
  transition: all 0.4s ease 0s;
  -webkit-transform: translateY(-60px);
}

/**
    鼠标移开恢复特效
 */
.policy-center-list-li img{
  transition: all 0.4s ease 0s;
}
.policy-center-list-li .text-box{
  transition: all 0.4s ease 0s;
}

</style>